<template>
	<view>
		<view class="top-swiper">
			 <view class="bg">
				 <view class="placeholder"></view>
				 <view class="image">
					 <block v-if="swiper.list.length">
					 <image :src="swiper.list[swiper.index].fileurl" mode="aspectFill"></image>
					 </block>
				 </view>
			 </view>
			 <view class="box">
				<view style="height: 44px;"></view>
				<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true" @change="swiperChange">
					<block v-if="swiper.list.length">
						<swiper-item v-for="(item,index) in swiper.list" :key="index">
							<image class='le-img' :src='item.fileurl' :class="{'le-active':swiper.index == index}"></image>
						</swiper-item>
					</block>
				</swiper> 
			 </view>
		</view>
		
		
		<view class="friend-invite-kouling">
			<view class="friend-invite-kouling-left">
				<text>邀请口令</text>
				<text>{{user_info.invite_code}}</text>
			</view>
			<view class="friend-invite-kouling-right" @click="duplication(user_info.invite_code)">
				<text>复制</text>
			</view>
		</view>
		
		<view class="friend-invite-step">
			<view>邀请步骤：</view>
			<view>1.分享邀请海报或者邀请链接给好友</view>
			<view>2.好友通过海报或者链接下载APP</view>
			<view>3.好友注册APP时填写您的邀请口令</view>
			<view>好友下载APP并使用您的邀请口令成功注册后，Ta将成为您的粉丝。</view>
		</view>
		
		<view class="friend-invite-footer">
			<view class="friend-invite-bottom">
				<text @click="duplication(swiper.list[swiper.index].url)">复制分享链接</text>
				<text @click="shareclick()">分享专属海报</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tools from "../../common/tools"
	import config from '../../common/config'
	import apiuser from '../../common/api/user'
	export default {
		data() {
			return {
				swiper: {
					margin: "150rpx",
					index: 0,
					list: [],
				},
				user_info:{},
				download_url:'',
				sharedata:[],
			}
		},
		components:{
			apiuser
		},
		computed:{
			topNavStyle(){
				let r = this.pageScrollTop  / 100;
				return {
					"class":r>=0.85?'style2':'',
					"style":`background-color: rgba(66, 185, 131,${r>=1?1:r});`
				}
			}
		},
		
		mounted() {
			
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.invite_share()	
		},
		
		onLoad() {	
			
		},
		
		methods: {
			//分享
			shareclick(){
				let img_url=this.swiper.list[this.swiper.index].fileurl
				let url=this.swiper.list[this.swiper.index].url
				let invite_code=this.user_info.invite_code
				uni.navigateTo({
					url:'../poster/index?img_url='+img_url+"&invite_code="+invite_code+"&url="+url
				})
			},
			
			
			//复制
			duplication(value){
				uni.setClipboardData({
					data: value
				});
			},
			
			//swiper滑动事件
			swiperChange: function(e) {
				this.swiper.index = e.detail.current;
			},
			
			//请求接口
			invite_share(){
				this.user_info = uni.getStorageSync('user_info') || '';
				apiuser.invite_share({}).then(res =>{
					this.swiper.list=res.data
				}).catch(cateres =>{
					
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "lib/global.scss";
	.top-swiper{
		margin-bottom: 30rpx; 
		
		.bg{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;
			
			.placeholder{
				box-sizing: content-box;
				padding-top: 600rpx;
				height: 44px;
			}
			
			.image{
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
					background-image: linear-gradient(to bottom ,transparent, #FFF);
				}
				
				> image{
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}
		
		.box{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}
		
		.swiper {
			height: 600rpx;
			margin: 0 20rpx;
		
			.le-img {
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 4px;
		
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
	
	
	
	
	page{
		background-color: #fff;
	}
	/* 标题栏 */
	.title{
		position: fixed;
		top: 0;
		left: 0;
		width: 98%;
		height: auto;
		padding-top: var(--status-bar-height);
		z-index: 10;
		background-color: rgba(66,185,131,0);
		color: rgba(255,255,255,0.8);
		
		&>view{
			height: 44px;
		}
		
		.box1{
			width: 60rpx;
			margin: 0 40rpx;
			font-size: 36rpx;
		}
		
		
		.tab{
			&>view{
				margin: 0 30rpx;
				line-height: 64rpx;
				font-size: 36rpx;
				position: relative;
				letter-spacing: 0;
				transition: transform 0.3s ease-in-out 0s;
				transform: scale(1,1);
				
				&.active{
					color: rgba(255,255,255,1);
					transform: scale(1.15,1.15);
				}
			}
		}
		
		&.style2{
			color: #FFF;
			background-color: rgba(66, 185, 131,1);
			
			.tab{
				&>view{
					&.active{
						color: #FFF;
					}
				}
			}
		}
	}
	
	.friend-invite-kouling{
		width:96%;
		margin:0 2%;
		background-color:#F4F4F4;
		padding:2%;
		display:flex;
		flex-direction:row;
		.friend-invite-kouling-left{
			width:70%;
		}
		.friend-invite-kouling-left>text{
			display:block;
		}
		.friend-invite-kouling-left>text:first-child{
			color:#333333;
		}
		.friend-invite-kouling-left>text:last-child{
			font-weight:bold;
			font-size:40upx;
		}
		.friend-invite-kouling-right{
			width:30%;
			padding-top:35upx;
		}
		.friend-invite-kouling-right>text{
			padding:15upx 40upx;
			color:#F76260;
			background: #FFC0CB;
			border-radius:20upx;
		}
	}
	.friend-invite-step{
		width:96%;
		margin:0 2%;
		padding:2%;
		line-height:30upx;
		margin-bottom:100upx;
	}
	.friend-invite-step>view:last-child{
		padding-top:40upx;
	}
	
	.friend-invite-footer{
		width:100%;
		position: fixed;
		right: 0;
		bottom: calc( var(--window-bottom) + 3px);
		left: 0;
		z-index: 1030;
		.friend-invite-bottom{
			width:80%;
			margin:0 auto;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			justify-content:left;
			flex-wrap:wrap;
			height:80upx;
			line-height:80upx;
		}
		.friend-invite-bottom>text{
			width:50%;
			display:block;
			text-align: center;
			color:#FFFFFF;
		}
		.friend-invite-bottom>text:first-child{
			background-color:#FA436A;
			border-top-left-radius:40upx;
			border-bottom-left-radius:40upx;
		}
		.friend-invite-bottom>text:last-child{
			background-color:#303133;
			border-top-right-radius:40upx;
			border-bottom-right-radius:40upx;
		}
	}

</style>